<script setup lang="ts">

export interface Command {
  type: string,
  params: {
    [key: string]: any
  }
}

// 下拉菜单项
export interface MenuItem {
  label: string
  command: Command
}

interface Props {
  items: MenuItem[],
  command: (command: Command) => void
}

const props = defineProps<Props>();


</script>

<template>
  <el-dropdown effect="light" placement="bottom" @command="props.command($event)">
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in props.items" :command="item.command">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
    <template #default>
      <el-tag>
        <slot/>
      </el-tag>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>